<template>
    <div>
        <div class="top">
            <!-- <span class="left">柳州中心工企业应急周转资金申请平台</span>
            <div class="right">
              <span style="color:rgba(255, 155, 55, 1)">注册</span><span >登录</span> -->
            <div class="left">
                <span>柳州中心工企业应急周转资金申请平台</span>
            </div>
            <div class="right">
                <div class="regist" @click="$router.push('/register')">注册</div>
                <div class="login" @click="$router.push('/login')">登录</div>
            </div>
        </div>
        <img id="bg" src="@/assets/images/loginbgc.jpg"/>
        <div class="content">
            <h1>法人登录</h1>
            <div class="loginfrom">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item prop="userName">
                        <el-col style="margin:0.534rem 0.145rem 0 0.145rem" :span="19">
                            <el-input v-model="ruleForm.userName"
                                      placeholder="请输入账号">
                                <i slot="prefix">
                                    <img
                                            style="width:0.45rem;height:0.45rem;margin-top: 0.1rem"
                                            src="@/assets/images/user.png"
                                            alt
                                    />
                                </i>
                            </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-col style="margin: 0.145rem 0.145rem 0 0.145rem" :span="22">
                            <el-input placeholder="请输入密码" v-model="ruleForm.password" show-password>
                                <i slot="prefix" style="display: flex;align-items: center;">
                                    <img
                                            style="width:0.45rem;height:0.45rem;margin-top: 0.1rem"
                                            src="@/assets/images/password.png"
                                            alt
                                    />
                                </i>
                            </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn"
                                   type="primary"
                                   @click="login('ruleForm')">登录
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="23">
                            <a style="font-size: 0.2rem;color: #0c51b1;cursor:pointer;margin-left: 0.1rem"
                               @click="Toregister()">立即注册</a> <a
                                style="float: right;font-size: 0.2rem;color: #0c51b1;cursor:pointer">忘记密码</a>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            var validateUserName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('账号不能为空'));
                }else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('密码不能为空'));
                }else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            return {
                ruleForm: {
                    userName: '',
                    password: '',
                },
                rules: {
                    userName: [
                        {validator: validateUserName, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePassword, trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
             login(formName) {
                // if (this.ruleForm.userName === '' || this.ruleForm.password === '') {
                // }else if(this.ruleForm.password=='') {
                //     this.$message.error('账号不能为空');
                // }else {
                //     this.$router.push("/home/index");
                //     let res = await this.request.loginOrRegister.login(this.ruleForm)
                //     console.log(res.code)
                //
                // }
                this.$refs[formName].validate  (async (valid) => {
                    if (valid) {
                        // 通过验证
                        this.$router.push("/home/index");
                        let res = await this.request.loginOrRegister.login(this.ruleForm)
                      this.$store.commit('setToken',res.data.token)
                        sessionStorage.setItem("token",res.data.token)
                    } else {
                        // 不通过表单验证
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            Toregister() {
                this.$router.push("/register");
            },
        },
        components: {},
    };
</script>

<style src="./login.css" scoped>

</style>
